<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>30 better-scroll联动</title>
	</head>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
	<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

	<body>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				background: #ccc;
			}

			#left-box {
				height: 100%;
				background: #fff;
			}

			#right-box {
				list-style: none;
				position: fixed;
				right: 20px;
				top: 50%;
				transform: translate(0, -50%);
			}

			#right-box ul {
				list-style: none;
			}

			#right-box ul li {
				line-height: 20px;
				font-size: 12px;
				text-align: center;
			}

			#right-box ul li.active {
				color: red;
			}

			#left-box ul {
				list-style: none;
				padding: 0;
			}

			#left-box ul li {
				text-indent: 20px;
				line-height: 50px;
				border-top: 1px solid #ebebeb;
				font-size: 14px;
				background-color: #fff;
			}

			#left-box li.title {
				background-color: #f7f7f7;
				line-height: 40px;
				color: #999;
			}
		</style>
		<div id="left-box">
			<div class="content">
				<ul></ul>
			</div>
		</div>
		<div id="right-box">
			<ul></ul>
		</div>

		<script>
			const rightList = ['★', 'A', 'B', 'C', 'E', 'F', 'G', 'H', 'Z'];
			const leftList = {
				'★': ['上海', '成都'],
				A: ['鞍山市', '安庆市'],
				B: ['北京市', '八音'],
				C: ['成都市'],
				E: ['鄂尔多斯市', '鄂州市'],
				F: ['福州市', '佛山市', '防城港市'],
				G: ['广州市', '贵阳市'],
				H: ['行州市', '和田地区'],
				Z: [
					'中山市',
					'自贡市',
					'郑州市',
					'珠海市',
					'张家界市',
					'资阳市',
					'中卫市',
					'株洲市',
					'淄博市',
					'遵义市',
					'舟山',
					'枣庄市',
					'张家口市',
					'中国',
				],
			};
			const offsetTop = [0];

			const rightUL = document.querySelector('#right-box ul');
			const leftUL = document.querySelector('#left-box ul');

			/* 渲染右侧 */
			rightList.forEach((v, i) => {
				if (i == 0) {
					rightUL.innerHTML += `<li class='active' data-id="${v}">${v}</li>`;
				} else {
					rightUL.innerHTML += `<li data-id="${v}">${v}</li>`;
				}
			});

			/* 渲染左侧 */
			for (key in leftList) {
				let lis = '';
				leftList[key].forEach(v => {
					lis += `<li >${v}</li>`;
				});
				leftUL.innerHTML += `<li id='${key}' class='title'>
                                     <h2>${key}</h2>
                                     <ul>
                                        ${lis}
                                     </ul>
                                 </li>`;
			}

			window.onload = function () {
				const rightLi = document.querySelectorAll('#right-box li');

				/* 监听右侧点击 */
				rightUL.addEventListener('click', function (e) {
					const id = e.target.dataset.id;
					if (e.target.tagName.toLocaleLowerCase() === 'li') {
						const el = document.querySelector(`#${id}`);
						if (el) bs.scrollToElement(el, 200, 0, 0);
					}
				});

				/* 获取高度 */
				document.querySelectorAll('li.title').forEach((v, i) => {
					offsetTop.push(v.offsetHeight + offsetTop[i]);
				});

				/* 初始化 */
				let bs = new BScroll('#left-box', {
					probeType: 3,
				});

				/* 监听滚动 ,切换激活 */
				bs.on('scroll', function ({ y }) {
					let top = Math.abs(y);
					for (let i = 0; i < offsetTop.length; i++) {
						if (top > offsetTop[i] && top < offsetTop[i + 1]) {
							for (let j = 0; j < rightLi.length; j++) {
								rightLi[j].className = '';
							}
							rightLi[i].className = 'active';
							break;
						}
					}
				});
			};
		</script>
	</body>
</html>
